<div class="modal-dialog modal-lg patch-documents-details" role="document">
    <div class="modal-content" tabindex="-1">
        <div class="modal-header">
            <div class="flex-horizontal">
                <div class="flex-grow">
                    <h3 class="modal-title" id="myModalLabel" data-bind="text: op.title, attr:{ class: 'modal-title ' + op.headerClass() }"></h3>
                </div>
                <div class="flex-grow text-right margin-right margin-right-sm">
                    <span class="text-muted">Time elapsed:</span> <span data-bind="text: op.duration"></span>
                </div>
                <div>
                    <button type="button" class="close" data-bind="click: close" aria-hidden="true">
                        <i class="icon-cancel"></i>
                    </button>
                </div>
            </div>
            <div class="notification-time" data-bind="text: op.displayDate().format('LLL')"></div>
        </div>
        <div class="modal-body">
            <div data-bind="visible: progress">
                <div class="modal-details">
                    <div class="details-item">
                        <div class="row">
                            <div class="col-sm-3 text-right">
                                Index:
                            </div>
                            <div class="col-sm-9 details-value">
                                <span data-bind="html: $root.op.message"></span>
                            </div>
                        </div>
                        <div class="row" data-bind="with: progress">
                            <div class="col-sm-3 text-right">
                                Processed:
                            </div>
                            <div class="col-sm-9 details-value">
                                <span data-bind="text: Processed.toLocaleString()"></span> / <span data-bind="text: Total.toLocaleString()"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 text-right">
                                Processing Speed:
                            </div>
                            <div class="col-sm-9 details-value">
                                <span data-bind="text: $root.processingSpeed"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 text-right">
                                Estimated Time Left:
                            </div>
                            <div class="col-sm-9 details-value">
                                <span data-bind="text: $root.estimatedTimeLeft"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 text-right">
                                Query:
                            </div>
                            <div class="col-sm-9 details-value">
                                <pre class="bg-info max-height">
<code data-bind="text: $root.query"></code>
</pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="progress" data-bind="with: progress">
                    <div class="progress-bar" role="progressbar" data-bind="style: {'width': Processed/Total*100 + '%'}">
                    </div>
                </div>
            </div>
            <div data-bind="if: operationFailed">
                <h3 class="text-danger">Operation failed!</h3>
                <pre class="margin-top error-messages"><code data-bind="foreach: errorMessages"><span data-bind="text: $data"></span>
</code></pre>
            </div>
            <div data-bind="with: result">
                <div class="modal-details">
                    <div class="details-item">
                        <div class="row">
                            <div class="col-sm-3 text-right">
                                Index:
                            </div>
                            <div class="col-sm-9 details-value">
                                <span data-bind="html: $root.op.message"></span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3 text-right">
                                Processed:
                            </div>
                            <div class="col-sm-9 details-value">
                                <span data-bind="text: Total.toLocaleString()"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 text-right">
                                Query:
                            </div>
                            <div class="col-sm-9 details-value">
                                <pre class="bg-info max-height">
<code data-bind="text: $root.query"></code>
</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer" data-bind="compose: $root.footerPartialView">
        </div>
    </div>
</div>
